<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
	  <!--
        <script src="https://unpkg.com/vue@next"></script>
        -->
	  <script type="text/javascript" src="../js/vue3.2.36/vue.js"></script>
	  <!-- import CSS -->
	  <!--
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    -->
	  <link rel="stylesheet" href="../js/element-plus2.2.28/index.css"></link>
	  <!-- import JavaScript -->
	  <!--
    <script src="https://unpkg.com/element-plus"></script>
    -->
	  <script type="text/javascript" src="../js/element-plus2.2.28/index.full.min.js"></script>
	  <script type="text/javascript" src="../js/jquery.min.js"></script>
    <title>数据库表编辑</title>
	  <style>
		  html,body{
			  padding:0;
			  margin:0;
		  }
	  </style>
  </head>
  <body>
    <div id="app" style="height:100%;">
	  <el-button type="primary" @click="onSubmit" style="position:fixed;bottom:10px;right:10px;z-index:999;" >保存</el-button>
	  <el-tabs class="demo-tabs" model-value="basic" >
		<el-tab-pane label="基本信息" name="basic">
			<el-form :model="table" ref="table" :rules="rules" label-width="120px"  >
				<el-form-item label="表名"  prop="tableName">
				  <el-input v-model="table.tableName" />
				</el-form-item>
				<el-form-item label="注释"  prop="tableComment">
				  <el-input v-model="table.tableComment" />
				</el-form-item>
			  </el-form>
		</el-tab-pane>
		<el-tab-pane label="字段" name="columnInfos"  >
			<el-button type="primary" @click="onAddField">添加</el-button>
			<el-table :data="table.columnInfos"  border height="500" >
				<el-table-column fixed  label="名称" width="300" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper" style="width:100%;">
								<input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.columnName" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="类型" width="300" >
					<template  #default="scope">
						<el-select v-model="scope.row.columnType"  filterable placeholder="请选择" clearable  >
							<el-option label="整数(11)" value="int(11)"  ></el-option>
							<el-option label="整数(20)" value="bigint(20)" ></el-option>
							<el-option label="字符串(20)" value="varchar(20)" ></el-option>
							<el-option label="字符串(64)" value="varchar(64)" ></el-option>
							<el-option label="字符串(256)" value="varchar(256)" ></el-option>
							<el-option label="字符串(1024)" value="varchar(1024)" ></el-option>
							<el-option label="大文本类型" value="longtext" ></el-option>
							<el-option label="日期类型" value="datetime"  ></el-option>
							<el-option label="小数" value="float"  ></el-option>
							<el-option label="小数-保留小数点后两位" value="float(19,2)"  ></el-option>
							<el-option label="小数-保留小数点后四位" value="float(19,4)" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column  label="注释" width="300" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper" style="width:100%;">
								<input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.columnComment" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="允许为空" width="100"   >
					<template  #default="scope">
						<el-select v-model="scope.row.isNullable"  placeholder="请选择" clearable >
							<el-option label="YES" value="YES" ></el-option>
							<el-option label="NO" value="NO" ></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200" >
					<template  #default="{row,column,$index}">
						<el-button type="primary" @click="onAddField(row,$index)">添加</el-button>
						<el-button type="primary" @click="onDeleteField(row,$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

		</el-tab-pane>
		<el-tab-pane label="索引" name="indexInfos">
			<el-button type="primary" @click="onAddIndex">添加</el-button>
			<el-table :data="table.indexInfos"  border  style="width: 100%" height="500">
				<el-table-column  label="名称" fixed width="300" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper" style="width:100%;" >
								<input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.keyName" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="字段列表" fixed width="300" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper" style="width:100%;" >
								<input class="el-input__inner" style="width:100%;" placeholder="用英文逗号隔开" v-model.lazy="scope.row.columnName" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="注释" fixed width="300" >
					<template  #default="scope">
						<div class='el_input'>
							<div class="el-input__wrapper" style="width:100%;" >
								<input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.indexComment" />
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200" >
					<template  #default="{row,column,$index}">
						<el-button type="primary" @click="onAddIndex(row,$index)">添加</el-button>
						<el-button type="primary" @click="onDeleteIndex(row,$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		  <el-tab-pane label="外键" name="foreignKeys">
			  <el-button type="primary" @click="onAddForeignKey">添加</el-button>
			  <el-table :data="table.foreignKeys"  border  style="width: 100%" height="500">
				  <el-table-column  label="名称" fixed width="300" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper" style="width:100%;" >
								  <input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.constraintName" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column  label="字段" fixed width="300" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper" style="width:100%;" >
								  <input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.columnName" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column  label="关联表" fixed width="300" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper" style="width:100%;" >
								  <input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.referencedTableName" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column  label="关联字段" fixed width="300" >
					  <template  #default="scope">
						  <div class='el_input'>
							  <div class="el-input__wrapper" style="width:100%;" >
								  <input class="el-input__inner" style="width:100%;" v-model.lazy="scope.row.referencedColumnName" />
							  </div>
						  </div>
					  </template>
				  </el-table-column>
				  <el-table-column fixed="right" label="操作" width="200" >
					  <template  #default="{row,column,$index}">
						  <el-button type="primary" @click="onAddForeignKey(row,$index)">添加</el-button>
						  <el-button type="primary" @click="onDeleteForeignKey(row,$index)">删除</el-button>
					  </template>
				  </el-table-column>
			  </el-table>
		  </el-tab-pane>
	  </el-tabs>

    </div>
    <script>
		let tableHeight = $(window).height() -90;
		$("el-table").attr("height",tableHeight);
		// 获取页面 url 参数
		$.getUrlParam = function (name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return '';
		}
      const App = {
        data() {
		  let table = {
		  	columnInfos:[],
			indexInfos:[],
			foreignKeys:[],
		  };
          return {
			table:table,
			rules:{
				tableName:[{required:true,trigger: 'change',message:"必填"}],
				tableComment:[{required:true,trigger: 'change',message:"必填"}]
			}
          };
        },
		mounted(){
        	let me = this;
			let tableName = $.getUrlParam("tableName");
			let type = $.getUrlParam("type");
			let url = "";
			if(type === 'copy'){
				url = "/tableInfo/copyTableInfo?tableName="+tableName;
			}else{
				url = "/tableInfo/tableInfo?tableName="+tableName;
			}
			$.ajax({
				type:"get",
				url:url,
				dataType: 'json',
				success:function(data){
					//console.info(data);
					if(data.status !== 0){
						ElementPlus.ElMessage(data.msg)
					}else{
						me.table = data.data;
					}
				}
			});
		},
		methods:{
			onSubmit(){
				let me = this;
				if(this.table.columnInfos.length == 0){
					ElementPlus.ElMessage("请配置字段")
					return;
				}
				this.$refs.table.validate((valid,fields)=>{
					if(valid){
						$.ajax({
							type:"post",
							url:"/tableInfo/updateTable",
							contentType: "application/json;charset=UTF-8",
							processData: false,
							data:JSON.stringify(me.table),
							dataType: 'json',
							success:function(data){
								if(data.status !== 0){
									ElementPlus.ElMessage(data.msg)
								}else{
									parent.jQuery("*[data-tooltip='关闭']").get(0).click()
									parent.jQuery("*[type='submit']").get(0).click()
								}
							}
						});
					}else{
						ElementPlus.ElMessage("请填写必填信息")
					}

				});

			},
			onDeleteField(row,index){
				this.deleteItem(this.table.columnInfos,row,index,'column');
			},
			onAddField(row,index){
				this.pushArr(this.table.columnInfos,row,index,'column');
			},
			onDeleteIndex(row,index){
				this.deleteItem(this.table.indexInfos,row,index,'index');
			},
			onAddIndex(row,index){
				this.pushArr(this.table.indexInfos,row,index,'index');
			},
			onDeleteForeignKey(row,index){
				this.deleteItem(this.table.foreignKeys,row,index,'foreignKey');
			},
			onAddForeignKey(row,index){
				this.pushArr(this.table.foreignKeys,row,index,'foreignKey');
			},
			deleteItem(arr,row,index,type){
				arr.splice(index, 1);
			},
			pushArr(arr,row,index,type){
				let defaultObj = {
					"index":{},
					"column":{
						"columnType":"varchar(64)",
						"isNullable":"YES"
					}
				};

				if(index){
					arr.splice(index+1,0,{
						...defaultObj[type]
					});
				}else{
					arr.push({
						...defaultObj[type]
					});
				}
			}
		}

      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");


    </script>
  </body>
</html>
